<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/eat.css">
    <script src="../js/url.js"></script>
    <script src="../js/jquery-1.js"></script>

    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

    <script src="../js/header.js"></script>
</head>

<body>
    <div class="hd"></div>
    <div class="hr">
        <header>
            <div class="warp">
                <ul>
                    <li>
                        <a href="javascript:;">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;">景点</a>
                    </li>
                    <li class="cur">
                        <a href="javascript:;">特色小吃</a>
                    </li>
                    <li>
                        <a href="javascript:;">地理位置</a>
                    </li>
                    <li>
                        <a href="javascript:;">历史</a>
                    </li>
                </ul>
            </div>
        </header>
        <article style="width:100%">
            <div class="bj4" style="margin:auto;width:1200px">
                <div class="bj4-box">
                    <div class="slider">
                        <ul class="slider-main">
                            <li class="slider-panel">
                                <a href="javascript:;" target="_blank">
                                    <img src="../img/lb (1).jpg">
                                </a>
                            </li>
                            <li class="slider-panel">
                                <a href="javascript:;" target="_blank">
                                    <img src="../img/lb (2).jpg">
                                </a>
                            </li>
                            <li class="slider-panel">
                                <a href="javascript:;" target="_blank">
                                    <img src="../img/lb (3).jpg">
                                </a>
                            </li>
                            <li class="slider-panel">
                                <a href="javascript:;" target="_blank">
                                    <img src="../img/lb (4).jpg">
                                </a>
                            </li>
                            <li class="slider-panel">
                                <a href="javascript:;" target="_blank">
                                    <img src="../img/lb (5).jpg">
                                </a>
                            </li>
                            <li class="slider-panel">
                                <a href="javascript:;" target="_blank">
                                    <img src="../img/lb (6).jpg">
                                </a>
                            </li>
                            <li class="slider-panel">
                                <a href="javascript:;" target="_blank">
                                    <img src="../img/lb (7).jpg">
                                </a>
                            </li>

                        </ul>
                        <div class="slider-extra">
                            <ul class="slider-nav">
                                <li class="slider-item"></li>
                                <li class="slider-item"></li>
                                <li class="slider-item"></li>
                                <li class="slider-item"></li>
                                <li class="slider-item"></li>
                                <li class="slider-item"></li>
                                <li class="slider-item"></li>
                            </ul>
                            <div class="slider-page">
                                <a class="slider-pre" href="javascript:;;">&lt;</a>
                                <a class="slider-next" href="javascript:;;">&gt;</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </div>
    <!-- tu -->
    <div style="width:1200px;height:50px;margin:auto">
        <span style="line-height:50px;font-size:12px">当前位置：特色小吃</span>
    </div>
    <div class="foot">
        <img src="../img/timg.jpg">
    </div>

    <!-- 正文部分 -->
    <div class="body">
        <div class="obody">
            <ul>
                <li>
                    <a href="javascript:;" style="z-index:10;position:relative;">
                        <img src="../img/0_s1258614_81813.jpg" style="width:295px;height:350px;z-index:100">
                    </a>
                    <div style=" position: relative;height:200px" class="bo">
                        <span class="sp1">兰州拉面</span>
                        <span class="sp2">兰州牛肉拉面，又称兰州清汤牛肉面，是“中国十大面条”之一，是甘肃省兰州地区的风味小吃。它以“汤镜者清，肉烂者香，面细者精”的独特风味和“一清二白三红四绿五黄”，一清（汤清）、二白（萝卜白）、三红（辣椒油红）、四绿（香菜、蒜苗绿）、五黄（面条黄亮），赢得了国内乃至全世界顾客的好评。并被中国烹饪协会评为三大中式快餐之一，得到美誉“中华第一面”。
                            坊间传说，兰州牛肉面起源于唐代。目前有史料记载的是兰州牛肉面始于清朝嘉庆年间，创始人：陈维精[1] 。经后人传承改进，以“一清(汤)二白(萝卜)三红(辣子)四绿(香菜蒜苗)五黄(面条黄亮)”统一了兰州牛肉面的标准。其制作的五大步骤无论从选料、和面、饧面，还是溜条和拉面，都巧妙地运用了所含成分的物理性能，即面筋蛋白质的延伸性和弹性。
                            兰州拉面是兰州最具特色的大众化经济小吃
                        </span>

                    </div>

                </li>
                <li>
                    <a href="javascript:;" style="z-index:10;position:relative;">
                        <img src="../img/0_s4537883_143719206784683.jpg" style="width:295px;height:350px;z-index:100">
                    </a>
                    <div style=" position: relative;height:200px" class="bo">
                        <span class="sp1">兰州牛肉面</span>
                        <span class="sp2">兰州牛肉拉面，又称兰州清汤牛肉面，是“中国十大面条”之一，是甘肃省兰州地区的风味小吃。它以“汤镜者清，肉烂者香，面细者精”的独特风味和“一清二白三红四绿五黄”，一清（汤清）、二白（萝卜白）、三红（辣椒油红）、四绿（香菜、蒜苗绿）、五黄（面条黄亮），赢得了国内乃至全世界顾客的好评。并被中国烹饪协会评为三大中式快餐之一，得到美誉“中华第一面”。
                            坊间传说，兰州牛肉面起源于唐代。目前有史料记载的是兰州牛肉面始于清朝嘉庆年间，创始人：陈维精[1] 。经后人传承改进，以“一清(汤)二白(萝卜)三红(辣子)四绿(香菜蒜苗)五黄(面条黄亮)”统一了兰州牛肉面的标准。其制作的五大步骤无论从选料、和面、饧面，还是溜条和拉面，都巧妙地运用了所含成分的物理性能，即面筋蛋白质的延伸性和弹性。
                            兰州拉面是兰州最具特色的大众化经济小吃
                        </span>

                    </div>

                </li>
                <li>
                    <a href="javascript:;" style="z-index:10;position:relative;">
                        <img src="../img/0_053c07e07cb1c006a7e9ecd2d879312f.jpg" style="width:295px;height:350px;z-index:100">
                    </a>
                    <div style=" position: relative;height:200px" class="bo">
                        <span class="sp1">灰豆子</span>
                        <span class="sp2">西北地区兰州独有的一种甜食小吃。用当地的蓬灰与豌豆，红枣，白糖一起熬煮成的粥，冬夏，早晚皆可使用，老少皆宜</span>

                    </div>

                </li>
                <li class="last">
                    <a href="javascript:;" style="z-index:10;position:relative;">
                        <img src="../img/lzlm.jpg" style="width:295px;height:350px;z-index:100">
                    </a>
                    <div style=" position: relative;height:200px" class="bo">
                        <span class="sp1">苏州拉面</span>
                        <span class="sp2">好吃不贵</span>

                    </div>

                </li>
                <!-- dierlun  -->
                <li>
                    <a href="javascript:;" style="z-index:10;position:relative;">
                        <img src="../img/2_241849e4955d1a434a7471da2d3cc214.jpg" style="width:295px;height:350px;z-index:100">
                    </a>
                    <div style=" position: relative;height:200px" class="bo">
                        <span class="sp1">泰安辣子面</span>
                        <span class="sp2"></span>

                    </div>

                </li>
                <li>
                    <a href="javascript:;" style="z-index:10;position:relative;">
                        <img src="../img/15_94a31d3f431250a1e3f52ddecacc8176.jpg" style="width:295px;height:350px;z-index:100">
                    </a>
                    <div style=" position: relative;height:200px" class="bo">
                        <span class="sp1">凉面</span>
                        <span class="sp2">凉面又称冷面，也称“过水面”，古称为“冷淘”，源于唐朝[1] ，是指凉吃的面条，主要食材有面条、蔬菜，配料有辣椒油、盐、味精等，但各地的凉面做法不同，因此做法和食材也有所不同。 世界上不少地区都有凉面，盛行于夏天天热胃口不佳食用
                        </span>

                    </div>

                </li>
                <li>
                    <a href="javascript:;" style="z-index:10;position:relative;">
                        <img src="../img/0_25325f76c971b39ac924f4e4ee333572.jpg" style="width:295px;height:350px;z-index:100">
                    </a>
                    <div style=" position: relative;height:200px" class="bo">
                        <span class="sp1">鸡蛋醪槽</span>
                        <span class="sp2">鸡蛋醪槽是流行于晋南、太原一带的风味小吃。以红米为原料，大火蒸熟，冷水冲好，搓开米粒，按不同季节不同用量，放入醪糟曲搅拌均匀，入缸封口，发酵即成。喝时加水和白糖，烧开打进鸡蛋，黄白相间，酸甜清香，具有健胃、助消化、润肺、活血等医疗功能
                        </span>

                    </div>

                </li>
                <li class="last">
                    <a href="javascript:;" style="z-index:10;position:relative;">
                        <img src="../img/0_0938ed64b34fd33d16445f2b5fbefd54.jpg" style="width:295px;height:350px;z-index:100">
                    </a>
                    <div style=" position: relative;height:200px" class="bo">
                        <span class="sp1">油炸糕</span>
                        <span class="sp2">油炸糕是东北地区、山西太原、大同、河北张家口及内蒙古丰镇地区传统特色糕点。油炸糕比较讲究，油炸糕具有个儿小、皮儿薄、花样多三个特点，其花样品种分豆馅、糖馅、 菜馅三种。 豆馅有小豆、豇豆、扁豆、芸豆四种；糖馅有红糖、白糖两种，另外各加青红丝、玫瑰、核桃仁、果脯等；菜馅有绿豆芽、土豆（该地区俗称山药）、胡萝卜馅，有地皮菜、豆腐干、土豆馅，有土豆、苦菜、韭菜馅，有土豆、芹菜馅等。无论是哪种馅的油糕，吃起来都是外酥里嫩，回味无穷。
                        </span>

                    </div>

                </li>
                <!-- 第三轮 -->
                <li>
                    <a href="javascript:;" style="z-index:10;position:relative;">
                        <img src="../img/8_b9f42c4849d133ce7421f24fe4ce9403.jpg" style="width:295px;height:350px;z-index:100">
                    </a>
                    <div style=" position: relative;height:200px" class="bo">
                        <span class="sp1">灰豆子</span>
                        <span class="sp2">好吃不贵</span>

                    </div>

                </li>
                <li>
                    <a href="javascript:;" style="z-index:10;position:relative;">
                        <img src="../img/2_468a476f7c5ade747d1874c362bfd9ac.jpg" style="width:295px;height:350px;z-index:100">
                    </a>
                    <div style=" position: relative;height:200px" class="bo">
                        <span class="sp1">苏州拉面</span>
                        <span class="sp2">高三酱肉是甘肃兰州的传统名食，属于甘肃菜。此菜肉质新鲜、色泽光亮，略显透明，不肥不腻，芳香四溢而闻名遐迩。是由高彬吾在集各地传统酱肉制作技艺精华的基础上，精心研究，卤制而成。因高氏行三而得名，至今已有近70年的历史，现主要在张掖路西端的福华轩专门经营</span>

                    </div>

                </li>
                <li>
                    <a href="javascript:;" style="z-index:10;position:relative;">
                        <img src="../img/0_855bafb9008a4f75eeca4938a9f9c93d.jpg" style="width:295px;height:350px;z-index:100">
                    </a>
                    <div style=" position: relative;height:200px" class="bo">
                        <span class="sp1">兰州版臊子凉面</span>
                        <span class="sp2">兰州版臊子凉面是一道主要由胡萝卜，土豆，香菇，木耳，豆干组成的食物。</span>

                    </div>

                </li>
                <li class="last">
                    <a href="javascript:;" style="z-index:10;position:relative;">
                        <img src="../img/0_56b6db937f3f0dc9fb16a6c11d589415.jpg" style="width:295px;height:350px;z-index:100">
                    </a>
                    <div style=" position: relative;height:200px" class="bo">
                        <span class="sp1">猪脏面</span>
                        <span class="sp2">猪脏面是一到用猪大肠烹制的传统名吃，属于甘肃菜。清代兰州人创制，民国时以宣家巷的风味最佳。因制作精巧、软烂醉香、风味独特而颇受欢迎</span>

                    </div>

                </li>
            </ul>
        </div>
    </div>

    <div class="fort">
        <footer>
            <div class="ofoot">
                <div style="height:50px"></div>
                <p>本页面未经个人同意，请拒绝转载......</p>
                <p>版权信息归个人所有，用户所看到的一切信息均受到版权保护，如有侵权，请联系站长删除</p>
                <p>网站持有者:刘亚峰 &nbsp; 所属院校：天津机电职业技术学院</p>
                <div>
                    <ul style="width:1200px;margin:auto;text-align:center">
                        <li>本站由：</li>
                        <li>
                            <a href="javascript:;">阿里巴巴</a>
                        </li>
                        <li>
                            <a href="javascript:;">京东</a>
                        </li>
                        <li>
                            <a href="javascript:;">中华日报</a>
                        </li>
                        <li>
                            <a href="javascript:;">美团网</a>
                        </li>
                        <li>
                            <a href="javascript:;">网易</a>
                        </li>
                        <li>
                            <a href="javascript:;">新浪</a>
                        </li>
                        <li>
                            <a href="javascript:;">四海八荒</a>
                        </li>
                        <li>
                            <a href="javascript:;">中华日报</a>
                        </li>
                        <li>
                            <a href="javascript:;">中华日报</a>
                        </li>
                        <li>
                            <a href="javascript:;">中华日报</a>
                        </li>
                        <li>特别赞助</li>
                    </ul>
                </div>
                <div style="height:50px"></div>
            </div>
        </footer>
    </div>
</body>
<script>
    $(function () {
        var STR = ""
        $(".hd").load("../html/header.html", function () {
            console.log(1)
            $(".hr").html(STR)
        }, function () {
            $(".hd").html(STR)
            console.log(2)
        })





        // 滑动效果
        $(".obody ul li").on("mouseover", function () {
            var index = $(this).index()

            console.log(index)
            $(".sp1").eq(index).stop().animate({

                bottom: "105px",

            })
            $(".sp2").eq(index).stop().animate({
                bottom: "100px"
            })
        }).on("mouseleave", function () {
            var index = $(this).index()
            $(".sp2").eq(index).stop().animate({

                bottom: "0px",

            })
            $(".sp1").eq(index).stop().animate({
                bottom: "0px"
            })
        })
        // 点击效果
        $(".obody ul li").on("click", function () {
            var index = $(this).index()
            var name = $(".sp1").eq(index).html()
            console.log(name)
            console.log(index)
            window.location.href = "https://baike.baidu.com/item/" + name
        })

    })
</script>

</html>